<template>
    <div class="container">
      <Category title="美食分类">
        <img slot="center" src="https://img2.baidu.com/it/u=2920730734,3660730734&fm=26&fmt=auto&gp=0.jpg" alt="美食宣传">
        <a slot="footer" href="https://www.atguigu.com">更多美食</a>
      </Category>
      <Category title="游戏分类">
        <ul slot="center">
            <li v-for="(game,index) in games" :key="index">{{game}}</li>
        </ul>
        <div slot="footer" class="foot">
          <a href="https://www.atguigu.com">单机游戏</a>
          <a href="https://www.atguigu.com">网络游戏</a>
        </div>
      </Category>
      <Category title="电影分类">
        <video slot="center" src="https://www.w3school.com.cn/i/movie.ogg" controls="controls"></video>
        <templete slot="footer">
          <div class="foot">
            <a href="https://www.atguigu.com">金典</a>
            <a href="https://www.atguigu.com">热门</a>
            <a href="https://www.atguigu.com">推荐</a>
          </div>
          <h4>欢迎前来观影</h4>
        </templete>
       
      </Category>
    </div>
</template>

<script>
import Category from "../components/Category.vue";
export default {
  name: "App",
  components:{
    Category
  },
  data(){
    return {
      foods:['火锅','烧烤','小龙虾','牛排'],
      games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
      films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
    }
  }
}
</script>
<style lang="css">
  .container,.foot{
    display: flex;
    justify-content: space-around;
  }
  h4{
    text-align: center;
  }
</style>



